<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>
          <!-- <navigation /> -->
          重点工作得分排名
        </span>
      </div>

      <div class="all">
        <div class="left">
          <div
            class="btn_bottom"
            :class="[isActive == 0 ? 'active' : '']"
            @click="showActive(0)"
          >
           单项重点工作得分排名
          </div>
          <div
            class="btn_bottom"
            :class="[isActive == 1 ? 'active' : '']"
            @click="showActive(1)"
          >
            各项重点工作得分排名
          </div>
        </div>
        <div class="right">
          <!-- 季度得分 -->
          <div style="margin-bottom:30px;">
            <span style="margin-left:46px;">领导小组:</span>
            <el-select
              class="userIntSizes"
              v-model="quarter"
              clearable
              placeholder="请选择领导小组"
            >
              <!-- <el-option
                v-for="item in quarterList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option> -->
            </el-select>
            <span style="margin-left:20px;">季度:</span>
            <el-select
              class="userIntSizes"
              v-model="quarter"
              clearable
              placeholder="请选择季度"
            >
              <el-option
                v-for="item in quarterList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <div id="YmyChart"></div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      quarter: "",
      quarterList: [
        { id: 1, name: "第一季度" },
        { id: 2, name: "第二季度" },
        { id: 3, name: "第三季度" },
        { id: 4, name: "第四季度" }
      ],
      tableData: [],
      tableDataboy: [],
      taskId: "",
      isActive: 0,
      quarter01: "",
      taskProp: {
        label: "name",
        value: "id",
        children: "children",
        checkStrictly: true
      },
      taskLists: [],
      taskTableData: []
    };
  },
  mounted() {
    this.dataAnalysis();
  },
  methods: {
    showActive(text) {
      this.isActive = text;
      if (text == 0) {
          this.dataAnalysis();
      } else if (text == 1) {
         this.dataMunicipal();
      }
    },
    // 季度得分
    quarterScore() {
      var YmyChart = this.$echarts.init(document.getElementById("YmyChart"));
      YmyChart.setOption({
        title: {
          text: "三个经济领导小组办公室二季度考核综合得分",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: [
            "完成率扣分",
            "'负面清单'得分",
            "日常工作台账",
            "加分项",
            "减分项",
            "总分"
          ]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 15, name: "完成率扣分" },
              { value: 5, name: "'负面清单'得分" },
              { value: 5, name: "日常工作台账" },
              { value: 6, name: "加分项" },
              { value: 4, name: "减分项" },
              { value: 100, name: "总分" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    // 全年
    yearScore() {
      console.log("2");
      var YmyChart = this.$echarts.init(document.getElementById("YmyChart"));
      YmyChart.setOption({
        title: {
          text: "三个经济工作2020年考核综合得分94.2分",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["一季度", "二季度", "三季度", "四季度", "各方面评价"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 10, name: "一季度" },
              { value: 6, name: "二季度" },
              { value: 7, name: "三季度" },
              { value: 2, name: "四季度" },
              { value: 4, name: "各方面评价" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    // 各区县得分排名分析展示
    dataAnalysis() {
      var YmyChart = this.$echarts.init(document.getElementById("YmyChart"));
      YmyChart.setOption({
        color: ["#0099FF"],
        title: {
          text: "人才及科创工作第一季度得分排名",
          left: "center"
        },
        xAxis: {
          type: "category",
          data: [
            "航天基地",
            "经开区",
            "高新区",
            "航空基地",
            "国际港务区",
            "浐灞生态区",
            "曲江新区"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [100,90, 80, 70, 60, 50, 40],
            type: "bar",
            showBackground: true,
            barWidth: 40,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)"
            },
            itemStyle: {
              normal: {
                //这里是重点
                color: function(params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = [
                    "#0099FF"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ]
      });
    },
    // 市级分析展示
    dataMunicipal() {
      var YmyChart = this.$echarts.init(document.getElementById("YmyChart"));
      YmyChart.setOption({
        color: ["#33CCCC"],
        title: {
          text: "市发改委第一季度各项重点工作得分排名",
          left: "center"
        },
        xAxis: {
          type: "category",
          data: [
            "绿色发展",
            "迎十四运",
            "营商环境",
            "先进制造业",
            "文化旅游",
            "教育强市",
            "军民融合"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            barWidth: 40,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)"
            },
            itemStyle: {
              normal: {
                //这里是重点
                color: function(params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = [
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ]
      });
    }
  }
};
</script>
<style scoped>
.userIntSizes {
  width: 20% !important;
}
#YmyChart {
  width: 70%;
  height: 440px;
  margin-top: 50px;
}
.all {
  width: 100%;
  height: 700px;
}
.left {
  float: left;
  width: 16%;
  padding-left: 2%;
  height: 100%;
}
.right {
  float: right;
  width: 84%;
  height: 100%;
  background: #fff;
}
.btn_bottom {
  width: 160px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  background: #66b1ff;
  font-size: 14px;
  margin-bottom: 10px;
  color: #fff;
  cursor: pointer;
}
.active {
  background: #67c23a;
}
</style>
